<template>
  <el-card>
    <div class="top-search">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="编号">
          <el-input v-model="formInline.user" placeholder="请输入编号" />
        </el-form-item>
        <el-form-item label="公告类别">
          <el-select v-model="formInline.region" placeholder="请选择公告类别">
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
  <el-card>
    <div class="btn-list">
      <el-button type="primary" @click="cliAddList">新增</el-button>
    </div>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="expand">
        <template #default="props">
          <div style="margin: 10px">
            <el-table
              border
              ref="singleTableRef"
              :data="tableDataChi"
              highlight-current-row
              style="width: 100%"
            >
              <el-table-column type="index" width="50" align="center" />
              <el-table-column
                property="date"
                label="矿产品编号"
                width="120"
                align="center"
              />
              <el-table-column
                property="name"
                label="起始价"
                width="120"
                align="center"
              />
              <el-table-column
                property="address"
                label="挂牌时间"
                align="center"
              />
              <el-table-column
                property="address"
                label="保函金额"
                align="center"
              />
              <el-table-column
                property="address"
                label="保函开局截至时间"
                align="center"
              />
              <el-table-column
                property="address"
                label="出价数"
                align="center"
              />
              <!-- <el-table-column
                property="address"
                label="开采矿种"
                align="center"
              /> -->
              <el-table-column
                property="address"
                label="矿区面积"
                align="center"
              />
              <el-table-column
                property="address"
                label="采矿区位置"
                align="center"
              />
              <el-table-column label="操作" align="center">
                <template #default="scope">
                  <el-button type="primary" @click="dialogVisibleUpload = true"
                    >上传</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
      </el-table-column>
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column prop="date" label="编号" width="150" align="center" />
      <el-table-column
        prop="name"
        label="公告名称"
        width="180"
        align="center"
      />
      <el-table-column prop="address" label="行政区" align="center" />
      <el-table-column prop="address" label="发布时间" align="center" />
      <el-table-column prop="address" label="公告类别" align="center" />
      <el-table-column label="发布状态" align="center">
        <template #default="scope">
          <el-switch
            v-model="scope.switch"
            size="small"
            active-text="开启"
            inactive-text="关闭"
        /></template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="150">
        <template #default="scope">
          <div class="btn">
            <el-button type="primary" @click="cliAdd">录入</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[100, 200, 300, 400]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
  <!-- 上传附件 -->
  <el-dialog v-model="dialogVisibleUpload" title="上传附件" width="40%">
    <el-upload class="upload-demo" drag action="#" multiple style="width: 100%">
      <el-icon class="el-icon--upload"></el-icon>
      <div class="el-upload__text">
        Drop file here or <em>click to upload</em>
      </div>
      <template #tip>
        <div class="el-upload__tip">
          jpg/png files with a size less than 500kb
        </div>
      </template>
    </el-upload>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 新增 -->
  <el-dialog
    v-model="dialogVisible"
    title="新增"
    width="50%"
    :before-close="handleClose"
  >
    <div>
      <el-form :model="form" label-width="150px" :rules="rules">
        <el-form-item label="采矿区编号" prop="id">
          <el-input v-model="form.id"></el-input>
        </el-form-item>
        <el-form-item label="起始价" prop="money">
          <el-input v-model="form.money"></el-input>
        </el-form-item>
        <el-form-item label="挂牌时间">
          <el-date-picker
            v-model="form.value1"
            type="datetimerange"
            range-separator="To"
            start-placeholder="Start date"
            end-placeholder="End date"
          />
        </el-form-item>
        <el-form-item label="保函金额">
          <el-input v-model="form.id"></el-input>
        </el-form-item>
        <el-form-item label="保函开具截至时间">
          <el-date-picker
            v-model="form.value2"
            type="datetime"
            placeholder="Select date and time"
          />
        </el-form-item>
        <el-form-item label="出价数">
          <el-input v-model="form.num"></el-input>
        </el-form-item>
        <!-- <el-form-item label="开采矿种">
          <el-input v-model="form.type"></el-input>
        </el-form-item> -->
        <el-form-item label="矿区面积">
          <el-input v-model="form.vla3"></el-input>
        </el-form-item>
        <el-form-item label="采矿权位置">
          <el-input v-model="form.vla4"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确 认
        </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 新增 -->
  <el-dialog
    v-model="dialogVisibleList"
    title="新增发布公告"
    width="50%"
    :before-close="handleClose"
  >
    <div>
      <el-form :model="form1" label-width="120px">
        <el-form-item label="矿产品类型">
          <el-select
            v-model="form1.value"
            class="m-2"
            placeholder="请选择矿产品类型"
            size="large"
            style="width: 100%"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="公告类型">
          <el-radio-group v-model="form1.radio">
            <el-radio-button label="挂牌公告" />
            <el-radio-button label="拍卖公告" />
            <el-radio-button label="补充公告" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="交易机构 ">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="发布时间 ">
          <el-date-picker
            v-model="form1.time"
            type="date"
            placeholder="请选择时间"
          />
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisibleList = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleList = false">
          确 认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessageBox } from "element-plus";
import type { FormInstance, FormRules } from "element-plus";
import { UploadFilled } from "@element-plus/icons-vue";
import { useRoute, useRouter, RouteLocationMatched } from "vue-router";
const router = useRouter();
// 数据
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
const tableDataChi = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
const multipleSelection = ref([]);
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
};

const rules = reactive<FormRules>({
  id: [{ required: true, message: "请输入采矿区编号", trigger: "blur" }],
  money: [{ required: true, message: "请输入起始价", trigger: "blur" }],
});

const cliAdd = () => {
  dialogVisible.value = true;
};
const cliAddList = () => {
  dialogVisibleList.value = true;
};
const form1 = reactive({
  name: "",
  value: "",
  time: "",
  radio: "挂牌公告",
});

// 新增模态框
const dialogVisible = ref(false);
const dialogVisibleList = ref(false);
const dialogVisibleUpload = ref(false);

const handleClose = (done: () => void) => {
  ElMessageBox.confirm("Are you sure to close this dialog?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};

const form = reactive({
  id: "",
  money: "",
  value1: "",
  value2: "",
  type: "",
  vla4: "",
  vla3: "",
  num: "",
});
const options = [
  {
    value: "采矿权",
    label: "采矿权",
  },
  {
    value: "探矿权",
    label: "探矿权",
  },
];

// 分页
const currentPage4 = ref(4);
const pageSize4 = ref(100);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
const formInline = reactive({
  user: "",
  region: "",
});

const onSubmit = () => {
  console.log("submit!");
};
</script>

<style lang="scss" scoped>
.el-card {
  margin: 15px;
}
.top-search {
  display: flex;
}
.btn-list {
  display: flex;
  margin: 10px 0;
}
.pagination {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  .el-button {
    margin-right: 5px;
  }
  // justify-content: space-around;
}
</style>
